<template>
  <div class="home">
    <div v-loading="data.loading" class="activity-container">
      <div style="margin-bottom: 10px; font-weight: bold">
        活动基本信息
        <div class="btn-container">
          <el-button
            v-if="!data.isBahn"
            @click="data.isBahn = true"
            type="primary"
            >修改</el-button
          >
          <el-button v-if="data.isBahn" @click="data.isBahn = false" type="info"
            >取消</el-button
          >
          <el-button v-if="data.isBahn" @click="save" type="success"
            >保存</el-button
          >
        </div>
      </div>
      <!-- 活动基本信息 -->
      <div v-loading="data.loading">
        <el-descriptions
          class="margin-top"
          label-width="150px"
          :column="2"
          border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动名称
              </div>
            </template>
            <label v-if="!data.isBahn">{{ props.data.title }}</label>
            <el-input
              v-if="data.isBahn"
              v-model="props.data.title"
              style="width: 140px"
              placeholder="请输入活动名称"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动状态
              </div>
            </template>
            <label>{{
              props.data.status == "planned" ? "计划中" : "进行中"
            }}</label>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动开始时间
              </div>
            </template>
            <label v-if="!data.isBahn">{{ props.data.startTime }}</label>
            <el-date-picker
              v-if="data.isBahn"
              v-model="props.data.startTime"
              type="datetime"
              placeholder="选择开始时间"
            ></el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                活动结束时间
              </div>
            </template>
            <label v-if="!data.isBahn">{{ props.data.endTime }}</label>
            <el-date-picker
              v-if="data.isBahn"
              v-model="props.data.endTime"
              type="datetime"
              placeholder="选择结束时间"
            ></el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                负责人
              </div>
            </template>
            <label>{{ props.data.publisherName }}</label>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动类型
              </div>
            </template>
            <label v-if="!data.isBahn">{{ props.data.eventTypeName }}</label>
            <el-tree-select
              v-if="data.isBahn"
              style="width: 240px"
              v-model="props.data.eventType"
              :data="data.typelist"
              :props="{
                label: 'value',
                value: 'id',
                children: 'dictionarys',
              }"
            >
            </el-tree-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动人数
              </div>
            </template>
            <label v-if="!data.isBahn">{{ props.data.count }}人</label>
            <el-input-number
              v-if="data.isBahn"
              v-model="props.data.count"
              :min="1"
              :max="100"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动地点
              </div>
            </template>
            <label v-if="!data.isBahn">{{ props.data.location }}</label>
            <el-input
              v-if="data.isBahn"
              v-model="props.data.location"
              style="width: 140px"
              placeholder="请输入修改地点"
            />
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <office-building />
                </el-icon>
                <label v-if="data.isthg == true">活动开始时间</label>
                <label v-if="data.isthg == false">活动结束时间</label>
              </div>
            </template>
            <div v-if="data.isthg == false">
              <label v-if="data.days > 0">
                {{ data.days }}天 {{ data.hours }}小时 {{ data.minutes }}分钟
                {{ data.seconds }}秒
              </label>
              <label v-if="data.days === 0">
                {{ data.hours }}小时 {{ data.minutes }}分钟 {{ data.seconds }}秒
              </label>
              <label style="margin-left: 360px"></label>
              <el-button @click="tqjsstart" type="danger">提前结束</el-button>
            </div>
            <div v-if="data.isthg == true">
              <label v-if="data.days > 0">
                {{ data.days }}天 {{ data.hours }}小时 {{ data.minutes }}分钟
                {{ data.seconds }}秒
              </label>
              <label v-if="data.days === 0">
                {{ data.hours }}小时 {{ data.minutes }}分钟 {{ data.seconds }}秒
              </label>
              <label style="margin-left: 360px"></label>
              <el-button @click="tqksstart" type="primary">提前开启</el-button>
            </div>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <office-building />
                </el-icon>
                描述
              </div>
            </template>
            <el-scrollbar height="80px">
              <label v-if="!data.isBahn">{{ props.data.description }}</label>
              <el-input
                v-if="data.isBahn"
                type="textarea"
                v-model="props.data.description"
                :rows="3"
                placeholder="请输入活动描述"
              ></el-input>
            </el-scrollbar>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-bottom: 10px; font-weight: bold; margin-top: 20px">
        参加活动人员
      </div>
      <!-- 参加活动人员 -->
      <div style="width: 300px; margin: 0 auto; padding-bottom: 8px">
        <el-input
          v-model="datas.key"
          placeholder="请输入名称"
          :prefix-icon="Search"
        />
      </div>
      <div v-loading="data.loading">
        <el-table
          border
          :data="data.dedsctList"
          style="width: 100%; height: 300px"
        >
          <el-table-column fixed type="index" width="30" />
          <el-table-column fixed prop="name" label="名称" />
          <el-table-column prop="gender" label="性别" width="60" />
          <el-table-column prop="age" label="年龄" width="60" />
          <el-table-column prop="phone" label="手机号码" width="150" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="industryName" label="行业" />
          <el-table-column prop="createAt" label="报名时间" width="160" />
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          background
          :page-size="datas.limit"
          layout="prev, pager, next"
          :total="datas.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { getDictionaryTreeByDictionaryTypeKey } from "@/api/dictionary";
import { Update } from "@/api/activity";
import { ElMessageBox } from "element-plus";
import { toast } from "@/tools/tools";
import { Pagination } from "@/api/activity";
import { Search } from "@element-plus/icons-vue";

let interval: any;
const emit = defineEmits(["close-drawer"]);

const data = reactive({
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0,
  isBahn: false,
  loading: false,
  typelist: [],
  isthg: false,
  dedsctList: [],
});

const datas = reactive({
  page: 1,
  limit: 10,
  total: 0,
  key: "",
});

// 点击分页
const handleSizeChange = (val: number) => {
  datas.page = 1;
  datas.limit = val;
};
const handleCurrentChange = (val: number) => {
  datas.page = val;
};

//获取父级数据
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});

// 提前开始
const tqksstart = () => {
  ElMessageBox.confirm("你确定要提前开启活动吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    props.data.startTime = new Date().toISOString();
    const res = await Update({
      ...props.data,
    });
    if (res.code === 0) {
      toast.success(res.message);
      emit("close-drawer");
    } else {
      toast.error(res.message);
    }
  });
};

// 提前结束
const tqjsstart = () => {
  ElMessageBox.confirm("你确定要提前结束活动吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    props.data.endTime = new Date().toISOString();
    const res = await Update({
      ...props.data,
    });
    if (res.code === 0) {
      toast.success(res.message);
      emit("close-drawer");
    } else {
      toast.error(res.message);
    }
  });
};

// 保存修改
const save = async () => {
  ElMessageBox.confirm("你确定要修改活动吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await Update({
      ...props.data,
    });
    if (res.code === 0) {
      toast.success(res.message);
      emit("close-drawer");
    } else {
      toast.error(res.message);
    }
  });
};

// 倒计时逻辑
const startCountdown = () => {
  const nowy = new Date();
  if (nowy < new Date(props.data.startTime)) {
    interval = setInterval(() => {
      const now = new Date().getTime();
      const end = new Date(props.data.startTime).getTime();
      console.log(end);
      const distance = end - now;

      if (distance < 0) {
        clearInterval(interval);
        data.days = 0;
        data.hours = 0;
        data.minutes = 0;
        data.seconds = 0;
        return;
      }

      data.days = Math.floor(distance / (1000 * 60 * 60 * 24));
      data.hours = Math.floor(
        (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      data.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      data.seconds = Math.floor((distance % (1000 * 60)) / 1000);
    }, 1000);
    data.isthg = true;
    return;
  }
  interval = setInterval(() => {
    const now = new Date().getTime();
    const end = new Date(props.data.endTime).getTime();
    console.log(end);
    const distance = end - now;

    if (distance < 0) {
      clearInterval(interval);
      data.days = 0;
      data.hours = 0;
      data.minutes = 0;
      data.seconds = 0;
      return;
    }

    data.days = Math.floor(distance / (1000 * 60 * 60 * 24));
    data.hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    data.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    data.seconds = Math.floor((distance % (1000 * 60)) / 1000);
    data.isthg = false;
  }, 1000);
};

//绑定数据
const bind = async () => {
  data.loading = true;
  const res = await getDictionaryTreeByDictionaryTypeKey(
    "car_events_categorys"
  );
  if (res.code === 0) {
    data.typelist = res.data;

    data.loading = false;
  }
  //获取参加活动人员列表
  const res2 = await Pagination({
    ...datas,
    cid: props.data.id,
  });
  if (res2.code === 0) {
    data.dedsctList = res2.data.data;
    datas.total = res2.data.total;
  }
};

onMounted(() => {
  bind();
  startCountdown();
});
</script>

<style scoped>
.home {
  height: calc(810px - 28px);
  width: calc(100% - 28px);
  padding: 14px;
  background-color: #fff;
  border-radius: 10px;
}

.btn-container {
  float: right;
  margin-bottom: 10px;
}

.countdown {
  margin-top: 40px;
}

.pagination {
  margin-top: 16px;
  margin-left: 0px;
}
</style>
